<template>
  <div class="goods-container">


    <div class="goods-content-item" 
      v-for="(item, index) in goodsList" 
      :key="index"  @click="gogoodsinfo(item.id)"
    >
      <img :src="item.img_url" alt="">
      <h2>{{ item.title }}</h2>
      <div class="goods-contbottom">
        <div class="p1">
          <h4>￥{{ item.now_pay }}</h4>
          <span>￥{{ item.old_pay }}</span>
        </div>
        <p class="p2">
          <span>{{ item.pay_type }}</span>
          <span>剩{{ item.have_num }}件</span>
        </p>
      </div>
    </div>

    <mt-button type="primary" size="large" plain @click="getGoodsList">获取更多</mt-button>

  </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
      goodsList: [],
      pagelog: 1
    }
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      this.$http.get('./../../../api/phonegoods.json?pagelog=' + this.pagelog).then(res => {
        if(res.body.status === 0) {
          this.goodsList = this.goodsList.concat(res.body.message);
          this.pagelog ++;
        }else {
          Toast('获取列表失败!');
        }
      })
    },
    gogoodsinfo(id) {
      //编程式导航 等价于 window.location.href 
      //this.$router.push('/home/goodsInfo/' + id);
      //this.$router.push({ path: '/home/goodsInfo/' + id })
      this.$router.push({ name: 'goodsInfo', params: { id: id }})

    }
  }
}
</script>

<style scoped>
  .goods-container {
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-between;
  }

  .goods-content-item {
    width: 49%;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 7px;
    box-shadow: 0 0 6px #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .goods-content-item img {
    width: 100%;
  }

  .goods-content-item h2 {
    font-size: 14px;
  }

  .goods-contbottom {
    background-color: #eee;
    padding: 10px 0;
    margin: 2px;
  }

  .goods-contbottom h4 {
    display: inline;
    color: red;
    margin-right: 10px;
  }
  .goods-contbottom .p1 {
    margin-bottom: 15px;
  }
  .goods-contbottom .p2 {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }
  .goods-contbottom .p1 span {
    font-size: 13px;
    color: #a5a5a5;
    text-decoration: line-through;
  }
</style>